<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>银行卡管理 - 虚拟银行系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/bankcards.css">
</head>
<body>
  <div class="app-wrapper">
    <!-- 顶部导航栏 -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- 侧边栏 -->
      <div id="sidebar"></div>
      
      <!-- 主内容区 -->
      <div class="content">
        <div class="dashboard-header">
          <div class="dashboard-welcome">
            <h1 class="dashboard-welcome-title">银行卡管理</h1>
            <p class="dashboard-welcome-subtitle">管理您绑定的银行卡</p>
          </div>
          <button class="btn btn-primary" id="add-bankcard-btn">
            <i class="fas fa-plus"></i> 添加银行卡
          </button>
        </div>
        
        <!-- 银行卡列表 -->
        <div class="bankcard-list" id="bankcard-list">
          <div class="loader-container">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加银行卡模态框 -->
  <div class="modal" id="add-bankcard-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">添加银行卡</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="add-bankcard-form">
            <div class="form-group">
              <label class="form-label" for="card-number">卡号</label>
              <div class="input-with-icon">
                <i class="fas fa-credit-card"></i>
                <input type="text" id="card-number" name="cardNumber" class="form-control" placeholder="请输入银行卡号" required maxlength="19">
              </div>
              <div class="form-error" id="card-number-error"></div>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="card-type">卡类型</label>
              <select id="card-type" name="cardType" class="form-control" required>
                <option value="1">储蓄卡</option>
                <option value="2">信用卡</option>
              </select>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="bank-name">银行名称</label>
              <select id="bank-name" name="bankName" class="form-control" required>
                <option value="中国工商银行">中国工商银行</option>
                <option value="中国农业银行">中国农业银行</option>
                <option value="中国银行">中国银行</option>
                <option value="中国建设银行">中国建设银行</option>
                <option value="交通银行">交通银行</option>
                <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
                <option value="中信银行">中信银行</option>
                <option value="中国光大银行">中国光大银行</option>
                <option value="华夏银行">华夏银行</option>
                <option value="中国民生银行">中国民生银行</option>
                <option value="广发银行">广发银行</option>
                <option value="招商银行">招商银行</option>
                <option value="兴业银行">兴业银行</option>
                <option value="浦发银行">浦发银行</option>
                <option value="平安银行">平安银行</option>
              </select>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="cardholder-name">持卡人姓名</label>
              <div class="input-with-icon">
                <i class="fas fa-user"></i>
                <input type="text" id="cardholder-name" name="cardholderName" class="form-control" placeholder="请输入持卡人姓名" required>
              </div>
              <div class="form-error" id="cardholder-name-error"></div>
            </div>
            
            <div class="card-type-specific" id="credit-card-fields" style="display: none;">
              <div class="form-group">
                <label class="form-label" for="expire-date">有效期</label>
                <div class="input-with-icon">
                  <i class="fas fa-calendar-alt"></i>
                  <input type="text" id="expire-date" name="expireDate" class="form-control" placeholder="月/年 (MM/YY)" pattern="[0-9]{2}/[0-9]{2}">
                </div>
                <div class="form-error" id="expire-date-error"></div>
              </div>
              
              <div class="form-group">
                <label class="form-label" for="cvv">安全码</label>
                <div class="input-with-icon">
                  <i class="fas fa-lock"></i>
                  <input type="text" id="cvv" name="cvv" class="form-control" placeholder="CVV" maxlength="3" pattern="[0-9]{3}">
                </div>
                <div class="form-error" id="cvv-error"></div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label" for="bind-phone">绑定手机号</label>
              <div class="input-with-icon">
                <i class="fas fa-mobile-alt"></i>
                <input type="tel" id="bind-phone" name="bindPhone" class="form-control" placeholder="请输入绑定手机号" required pattern="[0-9]{11}">
              </div>
              <div class="form-error" id="bind-phone-error"></div>
            </div>
            
            <div class="form-group">
              <label class="checkbox-container">
                <input type="checkbox" id="is-default" name="isDefault" value="1">
                <span class="custom-checkbox">
                  <i class="fas fa-check"></i>
                </span>
                <span>设为默认银行卡</span>
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="save-bankcard-btn">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 确认删除模态框 -->
  <div class="modal" id="confirm-delete-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">确认删除</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <p>您确定要删除这张银行卡吗？该操作无法撤销。</p>
          <div class="alert alert-warning">
            <div class="alert-icon">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div>
              删除默认银行卡将会影响提现等功能的正常使用，请谨慎操作。
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-danger" id="confirm-delete-btn">删除</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/PageLayout.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/bankcards.js"></script>
</body>
</html>
